import React, { useState } from'react';
import styles from '../../css/login.module.css';
import background from '../../assets/background.jpg';
import plane from '../../assets/plane.png';
import wx from '../../assets/wx.png';
import { useNavigate } from'react-router-dom';
import { Toast } from 'antd-mobile';
import { login, changePassword } from '../../api/login'; // 导入封装的API

/**
 * 登录页面组件
 * 提供用户登录功能，包括手机号密码登录和密码修改功能
 */
const LoginPage = () => {
    const navigate = useNavigate();
    
    // 表单状态管理
    const [phone, setPhone] = useState(''); // 手机号
    const [password, setPassword] = useState(''); // 密码
    const [isChecked, setIsChecked] = useState(false); // 用户协议勾选状态

    // 修改密码弹窗状态
    const [showModal, setShowModal] = useState(false); // 控制修改密码弹窗显示/隐藏
    const [newPassword, setNewPassword] = useState({
        phone: '', // 修改密码的手机号
        password: '', // 新密码
        confirmPassword: '' // 确认新密码
    });

    /**
     * 处理登录逻辑
     * 验证表单数据，调用登录API，根据返回结果处理登录成功或失败
     */
    const handleLogin = async () => {
        // 验证表单完整性
        if (!phone ||!password) {
            Toast.show({
                content: '请填写完整信息！',
                position: 'top',
                duration: 2000
            });
            return;
        }
        
        // 验证协议是否勾选
        if (!isChecked) {
            Toast.show({
                content: '请先勾选用户协议！',
                position: 'top',
                duration: 2000
            });
            return;
        }

        try {
            // 调用登录API
            const res = await login(phone, password);
            console.log('接口响应数据:', res);
            
            if (res.code === 1) {
                // 登录成功，存储用户信息到sessionStorage
                sessionStorage.setItem("userid", res.data.id);
                sessionStorage.setItem("nickname", res.data.nickname);
                sessionStorage.setItem("tel", res.data.tel);
                sessionStorage.setItem("code", res.data.code);
                sessionStorage.setItem("mine", JSON.stringify(res.data));
                
                // 显示登录成功提示
                Toast.show({
                    content: '登录成功！',
                    position: 'top',
                    duration: 2000
                });
                
                // 存储用户ID和token
                sessionStorage.setItem("userId", res.data.id);
                sessionStorage.setItem("token", res.data.token);
                
                // 3秒后跳转到首页
                setTimeout(() => {
                    navigate("/home");
                }, 3000);
            } else if (res.code === 0) {
                // 登录失败，显示错误信息
                Toast.show({
                    content: '手机号或密码错误',
                    position: 'top',
                    duration: 2000
                });
                
                // 根据具体错误信息显示不同提示
                if (res.msg === "手机号或密码错误" || res.msg === "账号或密码不正确") {
                    Toast.show({
                        content: '手机号或密码错误',
                        position: 'top',
                        duration: 2000
                    });
                } else if (res.msg === "用户不存在") {
                    Toast.show({
                        content: '用户不存在',
                        position: 'top',
                        duration: 2000
                    });
                }
            }
        } catch (error) {
            // 处理网络错误
            Toast.show({
                content: '登录失败，请稍后重试',
                position: 'top',
                duration: 2000
            });
            console.log('请求失败', error);
        }
    };



    return (
        <div className={styles.loginContainer}>
            {/* 背景图片 */}
            <img className={styles.backgroundImage} src={background} alt="背景图" />
            {/* 装饰性飞机图片 */}
            <img className={styles.aircraftImage} src={plane} alt="飞机图标" />

            {/* 登录表单区域 */}
            <div className={styles.loginForm}>
                <div className={styles.inputGroup}>
                    {/* 手机号输入框，双向绑定phone状态 */}
                    <input
                        className={styles.inputOne}
                        type="tel"
                        id="tel"
                        placeholder="请输入手机号"
                        value={phone}
                        onChange={(e) => setPhone(e.target.value)}
                    />
                    {/* 密码输入框，双向绑定password状态 */}
                    <input
                        className={styles.inputTwo}
                        type="password"
                        id="password"
                        placeholder="请输入密码"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                    />
                </div>

                {/* 表单选项区域：协议勾选和链接 */}
                <div style={{ marginTop: '-15px' }} className={styles.formOptions}>
                    <div className={styles.agreement}>
                        {/* 用户协议勾选框，双向绑定isChecked状态 */}
                        <input
                            type="checkbox"
                            className={styles.checkbox}
                            id="box"
                            checked={isChecked}
                            onChange={(e) => setIsChecked(e.target.checked)}
                        />
                        {/* 用户协议链接，点击后可跳转到协议页面 */}
                        <p onClick={() => {/* 跳转到用户协议页面 */ }}>用户协议</p>
                    </div>
                    <div className={styles.links}>
                        {/* 忘记密码链接，点击显示修改密码弹窗 */}
                        <p onClick={() => setShowModal(true)}>忘记密码？</p>
                        {/* 注册链接，点击导航到注册页面 */}
                        <p onClick={() => navigate("/register")}>前往注册</p>
                    </div>
                </div>

                {/* 登录按钮，点击触发handleLogin函数 */}
                <button style={{ marginTop: '20px' }} className={styles.loginButton} onClick={handleLogin}>
                    登录
                </button>
            </div>

            {/* 微信登录区域 */}
            <div className={styles.socialLogin}>
                <img src={wx} alt="微信登录" />
            </div>

            {/* 页脚版权信息 */}
            <div className={styles.footer}>
                <span>@版权归大喇叭编程实训基地所有</span>
            </div>

            {/* 修改密码弹窗，当showModal为true时显示 */}
            {showModal && (
                <div className={styles.modalOverlay}>
                    <div className={styles.modalContent}>
                        <h3>修改密码</h3>
                        <div className={styles.modalInputs}>
                            {/* 修改密码的手机号输入框 */}
                            <input
                                type="tel"
                                id="modification-tel"
                                placeholder="请输入手机号"
                                value={newPassword.phone}
                                onChange={(e) => setNewPassword({...newPassword, phone: e.target.value })}
                            />
                            {/* 新密码输入框 */}
                            <input
                                type="password"
                                id="modification-password"
                                placeholder="输入密码"
                                value={newPassword.password}
                                onChange={(e) => setNewPassword({...newPassword, password: e.target.value })}
                            />
                            {/* 确认新密码输入框 */}
                            <input
                                type="password"
                                id="modification-teltwo"
                                placeholder="请确认密码"
                                value={newPassword.confirmPassword}
                                onChange={(e) => setNewPassword({...newPassword, confirmPassword: e.target.value })}
                            />
                        </div>
                        
                    </div>
                </div>
            )}
        </div>
    );
};

export default LoginPage;